<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable - <span class="subitem">Column Toggler</span></span>
        <span>This demo uses a multiselect component to implement toggleable columns.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-dataTable [value]="cars">
        <p-header>
            <div style="text-align:left">
                <p-multiSelect [options]="columnOptions" [(ngModel)]="cols"></p-multiSelect>
            </div>
        </p-header>
        <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
    </p-dataTable>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatablecoltogglerdemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablecoltogglerdemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableColTogglerDemo implements OnInit &#123;

    cars: Car[];
    
    cols: any[];
    
    columnOptions: SelectItem[];
        
    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
        
        this.cols = [
            &#123;field: 'vin', header: 'Vin'&#125;,
            &#123;field: 'year', header: 'Year'&#125;,
            &#123;field: 'brand', header: 'Brand'&#125;,
            &#123;field: 'color', header: 'Color'&#125;
        ];
        
        this.columnOptions = [];
        for(let i = 0; i < this.cols.length; i++) &#123;
            this.columnOptions.push(&#123;label: this.cols[i].header, value: this.cols[i]&#125;);
        &#125;
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datatablecoltogglerdemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablecoltogglerdemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataTable [value]="cars"&gt;
    &lt;p-header&gt;
        &lt;div style="text-align:left"&gt;
            &lt;p-multiSelect [options]="columnOptions" [(ngModel)]="cols"&gt;&lt;/p-multiSelect&gt;
        &lt;/div&gt;
    &lt;/p-header&gt;
    &lt;p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>